<template>
  <div class="container">
    <van-sticky>
    <div class="head-wrap">
      <img @click="goBack" src="../assets/back.svg" alt="">
      <div class="search-wrap" >
        <van-search
          class="custom-search"
            v-model="value"
            show-action
            placeholder="请输入搜索关键词"
        >
          <template #action>
            <div style="color: #000" @click="onSearch">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    </van-sticky>
    <van-empty v-if="waitFilmList.length ===0 && hotFilmList.length === 0 && cinemaList.length === 0" image="search" description="" />
    <div class="search-box">
      <!--      影院-->
      <div class="cinema" v-if="cinemaList.length !== 0">
        <header>影院</header>
        <div>
          <div @click="goComing(item)" class="list" v-for="(item) in cinemaList">
            <div>{{item.cinema_name}}</div>
            <div>
              <div>{{item.address}}</div>
              <div>
<!--                <van-icon name="location" color="#42a5f5" />-->
                <div>{{item.distance}}km</div>
              </div>
            </div>
            <div>影院电话：{{item.phone}}</div>
            <div>
              <div :style="{color:x.color,borderColor:x.color}" v-for="(x,y) in item.tagList">{{x.text}}</div>
            </div>
          </div>
        </div>

      </div>
      <!--      影片v-if="hotFilmList.length !== 0 || waitFilmList.length !== 0"-->
      <div class="film" >
        <header>影片</header>
        <div>
          <van-tabs v-model="active">
            <van-tab title="热映"></van-tab>
            <van-tab title="待映"></van-tab>
          </van-tabs>
          <hotFilm :searchValue="value" v-if="active === 0"></hotFilm>
          <soonFilms :searchValue="value" v-if="active === 1"></soonFilms>
<!--          <div v-if="active === 0" class="list" v-for="(item,index) in hotFilmList">-->
<!--            <div class="left">-->
<!--              <img :src="$buildFullImageUrl + item.pic" alt="">-->
<!--            </div>-->
<!--            <div class="right">-->
<!--              <div class="top">-->
<!--                <div>{{item.film_name}}</div>-->
<!--                <div>-->
<!--                  <div v-if="firstValidItem(item.version_type)" class="max">-->
<!--                    <div>IMAX</div>-->
<!--                    <div>{{firstValidItem(item.version_type).replace(/IMAX/g, "")}}</div>-->
<!--                  </div>-->
<!--                  <div v-for="(x,y) in item.version_type" v-if="!x.includes('IMAX')" class="noMax">{{x}}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="bot">-->
<!--                <div class="bot-left">-->
<!--                  <div>-->
<!--                    <span>评分</span>-->
<!--                    <span>{{item.score}}</span>-->
<!--                  </div>-->
<!--                  <div>-->
<!--                    <span>导演：{{item.director}}</span>-->
<!--                  </div>-->
<!--                  <div>-->
<!--                    <span>主演：{{item.cast}}</span>-->
<!--                  </div>-->
<!--                   <div>类型：{{item.film_type}}</div>-->
<!--                </div>-->
<!--                <div class="bot-right">-->
<!--                    <div @click="buyMovies(item.film_id)">兑换</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div v-if="active === 1" class="list" v-for="(item,index) in waitFilmList">-->
<!--            <div class="left">-->
<!--              <img :src="$buildFullImageUrl + item.pic" alt="">-->
<!--            </div>-->
<!--            <div class="right">-->
<!--              <div class="top">-->
<!--                <div>{{item.film_name}}</div>-->
<!--                <div>-->
<!--                  <div v-if="firstValidItem(item.version_type)" class="max">-->
<!--                    <div>IMAX</div>-->
<!--                    <div>{{firstValidItem(item.version_type).replace(/IMAX/g, "")}}</div>-->
<!--                  </div>-->
<!--                  <div v-for="(x,y) in item.version_type" v-if="!x.includes('IMAX')" class="noMax">{{x}}</div>-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="bot">-->
<!--                <div class="bot-left">-->
<!--                  <div>-->
<!--                    <span style="color: #f6c110">{{item.like}}</span>-->
<!--                    <span style="color: #86909c">想看</span>-->
<!--                  </div>-->
<!--                  <div>类型：{{item.film_type}}</div>-->
<!--                  <div>-->
<!--                    <span>导演：{{item.director}}</span>-->
<!--                  </div>-->
<!--                  <div>-->
<!--                    <span>主演：{{item.cast}}</span>-->
<!--                  </div>-->

<!--                </div>-->
<!--                <div class="bot-right">-->
<!--                  <div style="background: #1FBCFF">预售</div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
        </div>
      </div>
      <!--      福利兑换-->
<!--      <div class="benefit">-->
<!--        <header>福利兑换</header>-->

<!--      </div>-->
    </div>
  </div>
</template>
<script>
import plantAPI from "@/api/plant";
import {getDistance} from "geolib";
import hotFilm from '@/components/hotFilm.vue'
import soonFilms from '@/components/soonFilms.vue'
export default {
  data(){
    return {
      cinemaAllList: [],//根据城市搜索的全部影院列表
      cinemaList: [],//搜索的影院列表
      value:'',
      active:0,
      hotFilmAllList:[],
      hotFilmList:[],
      waitFilmAllList:[],
      waitFilmList:[]
    }
  },
  components:{
    hotFilm,
    soonFilms
  },
  created() {
    plantAPI.getcinemaAPI(localStorage.getItem('city_id')).then(res=>{
      this.cinemaAllList = JSON.parse(res.data.body).data;
      this.cinemaAllList.forEach(i=>{
        i.distance = this.calculate(i.longitude,i.latitude)
      })
      this.cinemaAllList = this.cinemaAllList.sort((a, b) => a.distance - b.distance);
    })
    plantAPI.gethotAPI({}).then(res=>{
      this.hotFilmAllList = JSON.parse(res.data.body).data.records;

    })
    plantAPI.getsoonAPI({}).then(res=>{
      this.waitFilmAllList = JSON.parse(res.data.body).data.records;

    })
  },
  watch:{
    cinemaList(){
      const tag = ['3D眼镜免费','休息区','改签','艺术影厅','可刷卡','可停车','VIP厅']
      this.cinemaList.forEach((i)=>{
        const service = JSON.parse(i.service);
        let tagList = []
        Object.keys(service).forEach((key)=>{
          let obj = {}
          if(tag.includes(key)){
            obj.text = key;
            if(key === '改签' || key === '艺术影厅' || key === 'VIP厅'){
              obj.color="rgb(95, 224, 95)"
            }else{
              obj.color="#FFB433"
            }
          }
          if(obj.text){
            tagList.push(obj)
          }

        })
        if(i.is_refund === 1){
          tagList.unshift({
            text:'退',
            color:"rgb(95, 224, 95)"
          })
        }
        i.tagList = tagList;
      })
    }
  },
  methods:{
    goComing(item) {
      this.$router.push({
        path: './comingTheater/movies',
        query: {
          film_Info: JSON.stringify(item)
        }
      })
    },
    buyMovies(film_id) {
      this.$router.push({
        path: './details',
        query: {
          film_id,
          type:1
        }
      })
    },
    firstValidItem(itemsArr) {
      return itemsArr.find(item => item.includes('IMAX')); // 返回第一个满足条件的元素
    },
    goBack(){
      // this.router.go(-1)
      this.$router.back()
    },
    onSearch(){
      this.cinemaList = this.fuzzySearch(this.cinemaAllList,'cinema_name',this.value)
      this.hotFilmList = this.fuzzySearch(this.hotFilmAllList,'film_name',this.value)
      this.waitFilmList = this.fuzzySearch(this.waitFilmAllList,'film_name',this.value)
      if(!this.value){
        this.cinemaList = []
        this.hotFilmList = []
        this.waitFilmList = []
      }
    },
    calculate(lon1, lat1) {
      let lon2 = localStorage.getItem('longitude')
      let lat2 = localStorage.getItem('latitude')
      if (lat1 && lon1 && lat2 && lon2) {
        const distanceInMeters = getDistance(
          { latitude: parseFloat(lat1), longitude: parseFloat(lon1) },
          { latitude: parseFloat(lat2), longitude: parseFloat(lon2) }
        );
        return (distanceInMeters / 1000).toFixed(2)
      }
    },
    //搜索
    fuzzySearch(data, field, keyword) {
      if (!Array.isArray(data)) {
        return [];
      }

      if (typeof field !== 'string' || !field.trim()) {
        return [];
      }

      if (typeof keyword !== 'string') {
        return [];
      }

      // 转换为小写以便不区分大小写搜索
      const lowerKeyword = keyword.toLowerCase();

      return data.filter(item => {
        // 检查对象是否存在且是否有该字段
        if (!item || typeof item !== 'object' || !(field in item)) {
          return false;
        }

        // 获取字段值并转换为字符串
        const value = item[field];
        const strValue = String(value).toLowerCase();

        // 检查是否包含关键词
        return strValue.includes(lowerKeyword);
      });
    }
  },


}
</script>
<style lang="scss" scoped>
:global {

  html,
  body {
    background-color: #F5F6F8 !important;
    margin: 0;
    padding: 0;
    height: 100%;
  }
}
.van-search__action {
  color: #42a5f5;
}
.container {
  background: #F5F6F8;
  min-height: 100vh;
  ::v-deep .van-sticky {
    background: #ffffff;
    //padding-left: 10px;
  }
  ::v-deep .van-empty{
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
  }
  .head-wrap{
    //width: 100%;
    //height: 60px;
    //display: flex;
    //align-items: center;
    //background-color: #FFFFFF;
    height: 64px;
    display: flex;
    align-items: center;
    background: linear-gradient(94deg,
      rgba(238, 71, 59, 0.05) 0%,
      rgba(246, 118, 109, 0.3) 58%,
      rgba(238, 71, 59, 0.3) 100%);
    color: #000; /* 文字颜色会保持不透明 */
    padding-left: 10px;
    img{
      width: 20px;
      height: 20px;
    }
    .search-wrap{
      width: calc(100% - 30px);
      padding:0 10px;
      box-sizing: border-box;
      //background-color: #FFFFFF;
      .van-search{
        padding: 0;
        border-radius: 15px;
        background: none;
      }
      ::v-deep .van-search__content{
        background-color: #f3efef;
        border-radius: 15px;
      }
      ::v-deep .van-field__control::placeholder{
        color: #666666;
      }
    }
  }
  .search-box{
    width: 100%;
    >div{
      width: 100%;
      background-color: #FFFFFF;
      margin-top: 5px;
      border-radius: 10px;
      header{
        width: 100%;
        font-size: 16px;
        font-weight: bold;
        text-align: left;
        color: #1A1A1A;
        border-bottom: 1px solid #e1e1e1;
        padding: 10px 10px;
      }
      >div:nth-child(2){
        padding: 0 10px 0 10px;
        box-sizing: border-box;
      }
    }
    .cinema{
      width: 100%;
      .list{
        width: 100%;
        padding-bottom: 15px;
        padding-top: 10px;
        border-bottom: 1px solid #e1e1e1;
        >div{
          width: 100%;
          text-align: left;
        }
        >div:nth-child(1){
          font-size: 14px;
          color: #000000;
          margin-bottom: 8px;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        >div:nth-child(2),>div:nth-child(3){
          font-size: 12px;
          color: #3d3c3c;
          margin-bottom: 8px;
          width: 100%;

        }
        >div:nth-child(2){
          display: flex;
          justify-content: space-between;
          align-items: center;

          >div:nth-child(1){
            width: calc(100% - 80px);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
          }
          >div:nth-child(2){
            display: flex;
            align-items: center;
          }
        }
        >div:nth-child(4){
          width: 100%;
          display: flex;
          flex-wrap: wrap;
          margin-top: 10px;
          >div{
            padding:1px 3px;
            border-radius: 2px;
            font-size: 8px;
            border: 1px solid #000;
            margin-right: 5px;
          }
        }
      }
      .list:last-child{
        border:none;
      }

    }
     .film{
       >div:nth-child(2){
         padding: 0 !important;
         box-sizing: border-box;
         background: #F5F6F8;
       }
       .van-tabs + div{
         margin-top: 10px;
       }
       //.list{
       //  width: 100%;
       //  display: flex;
       //  justify-content: space-between;
       //  padding: 10px;
       //  box-sizing: border-box;
       //}
       //.left{
       //  width: 80px;
       //  height:110px;
       //  border-radius: 5px;
       //  overflow: hidden;
       //  img{
       //    width: 100%;
       //    height:100%;
       //  }
       //}
       //.right{
       //  width: calc(100% - 90px);
       //  .top{
       //    width: 100%;
       //    display: flex;
       //    align-items: center;
       //    flex-wrap: nowrap;
       //
       //    margin-bottom: 4px;
       //    >div:nth-child(1){
       //      font-size: 14px;
       //      font-weight: bold;
       //      margin-right: 8px;
       //      border-radius: 2px;
       //      max-width: 18ch;
       //      width: fit-content;
       //      overflow: hidden;
       //      white-space: nowrap;
       //      text-overflow: ellipsis;
       //    }
       //    >div:nth-child(2){
       //      display: flex;
       //      margin-top: 2px;
       //      >div{
       //        margin-right: 5px;
       //        border-radius: 2px;
       //
       //      }
       //      >div:nth-child(n+3){
       //        display: none;
       //      }
       //
       //      .max{
       //        font-size: 10px;
       //        display: flex;
       //        height: 15px;
       //        line-height: 15px;
       //        div{
       //          padding: 0 2px;
       //        }
       //        >div:nth-child(1){
       //          color: #86909c;
       //          border: 1px solid #86909c;
       //          box-sizing: border-box;
       //          height: 15px;
       //          line-height: 15px;
       //        }
       //        >div:nth-child(2){
       //          color:#FFFFFF;
       //          background: #86909c ;
       //          height: 15px;
       //          line-height: 15px;
       //        }
       //      }
       //      .noMax{
       //        height: 15px;
       //        line-height: 15px;
       //        display: flex;
       //        padding: 1px 2px;
       //        font-size: 10px;
       //        color:#FFFFFF;
       //        background: #86909c ;
       //      }
       //    }
       //
       //
       //
       //  }
       //  .bot{
       //    width: 100%;
       //    display: flex;
       //    justify-content: space-between;
       //    .bot-left{
       //     width: calc(100% - 74px);
       //      display: flex;
       //      flex-wrap: wrap;
       //      align-content: space-between;
       //      >div:nth-child(1){
       //        width: 100%;
       //        font-size: 12px;
       //        //margin-bottom: 4px;
       //        >span:nth-child(1){
       //          color: #86909c;
       //        }
       //        >span:nth-child(2){
       //          color: #f6c110;
       //          margin-left: 5px;
       //          font-size: 14px;
       //        }
       //      }
       //      >div:nth-child(2),>div:nth-child(3),>div:nth-child(4){
       //        width: 100%;
       //        font-size: 12px;
       //        color: #86909c;
       //        margin-top: 4px;
       //        overflow: hidden;
       //        white-space: nowrap;
       //        text-overflow: ellipsis;
       //      }
       //    }
       //    .bot-right{
       //      width:64px;
       //      >div{
       //        width: 64px;
       //        height: 26px;
       //        line-height: 26px;
       //        border-radius: 17px;
       //        background-color: rgba(246,57,13,1);
       //        color: #FFFFFF;
       //        font-size: 12px;
       //        text-align: center;
       //        margin-top: 20px;
       //      }
       //
       //    }
       //  }
       //}
     }
    .benefit{

    }
  }
}
</style>
